<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-card shadow="hover">
        <el-row class="bottomLine">
          <el-form-item label="应用:" label-width="40">
            <el-select v-model="queryParams.applicationCode" multiple placeholder="请选择应用">
              <el-option v-for="dict in applicationList" :key="dict.appCode" :label="dict.name" :value="dict.appCode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="bottomLine">
          <el-col :span="14">
            <el-form-item label="显示漏斗" prop="status" style="padding-bottom:1px;margin-bottom:1px;">
              <el-select v-model="queryParams.funnelId" @change="queryFunnelData" label="显示漏斗" placeholder="请选择显示漏斗"
                clearable size="small">
                <el-option v-for="dict in funnelDataOptions" :key="dict.id" :label="dict.title" :value="dict.id">
                </el-option>
              </el-select>
              <el-link type="primary" :underline="false" @click="selfSetFunnelFun" style="margin-left:10px;">
                <i class="el-icon-edit" style="font-size:20px;"></i>
              </el-link>
            </el-form-item>
          </el-col>
          <el-col :span="1.5" style="float: right;">
            <el-button type="primary" icon="el-icon-plus" size="mini" style="font-size:14px;" @click="handleCreate">创建漏斗
            </el-button>





          </el-col>

        </el-row>
        <!--      <el-form-item label="按" prop="status" class="bottomLine" v-for="(item,index) in queryParams.eventTypeGroup">-->
        <!--        <el-select v-model="queryParams.eventTypeGroup[index]" placeholder="请选择是否启用" clearable size="small">-->
        <!--          <el-option-->
        <!--            v-for="dict in eventTypeOptions"-->
        <!--            :key="dict.eventType"-->
        <!--            :label="dict.eventTypeName"-->
        <!--            :value="dict.eventType"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--        查看-->
        <!--        <el-link type="primary" :underline="false" style="padding-left:20px;"  @click="addEventTypeGroup" v-show="(queryParams.eventTypeGroup.length-1)===index">-->
        <!--          <i class="el-icon-plus" style="font-size:20px"></i>-->
        <!--        </el-link>-->
        <!--      </el-form-item>-->
        <el-row v-show="queryParams.queryItems.length > 0">
          <el-form-item label="" style="display: block;padding-left:80px;" label-width="60px">
            <AndOrLine style="height: calc(100% - 10px);" v-show="queryParams.queryItems.length > 1"
              v-model="queryParams.conditionRelation"></AndOrLine>
            <p style="margin: 0 0 10px; " v-for="(eventItem, index) in queryParams.queryItems">
              <el-select v-model="eventItem.eventType" style="width:120px;margin-right: 15px;"
                @change="eventTypeChange(queryParams.queryItems, index)">
                <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName"
                  :value="dict.id" />
              </el-select>
              <el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 15px;" value-key="id">
                <el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
                  :label="dict.eventItemName" :value="dict" />
              </el-select>
              <el-select v-model="eventItem.eventItemExpression" style="width:120px;margin-right: 15px;">
                <el-option v-for="dict in eventPropertysOptions[eventItem.eventItem.valueType]"
                  :key="dict.eventItemCode" :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:100px"
                v-show="eventItem.eventItemExpression != 'between'"></el-input>
              <span v-show="eventItem.eventItemExpression == 'between'">
                <el-input v-model="eventItem.value1Str" type="text" controls-position="right" style="width:90px">
                </el-input>与
                <el-input v-model="eventItem.value2Str" type="text" controls-position="right" style="width:90px">
                </el-input>之间
              </span>
              <el-link type="primary" :underline="false" style="padding-left:20px;font-size:18px"
                @click="removeRule(queryParams.queryItems, index)">
                <i class="el-icon-remove"></i>
              </el-link>
            </p>

          </el-form-item>
        </el-row>

        <el-row :gutter="10" class="bottomLine">
          <el-link type="primary" :underline="false" style="padding-left:20px; font-size: 15px;" @click="addRule">
            <i class="el-icon-plus"></i> 筛选条件
          </el-link>
        </el-row>
      </el-card>
      <br>
      <el-row :gutter="2" class="bottomLine">
        <el-col :span="6">
          <el-date-picker v-model="queryParams.dateRange" @change="queryFunnelData" size="small"
            style="width: 240px;margin-top: -3px;" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
            :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

        </el-col>
        <el-col :span="2">
          <span style="line-height:25px;font-size:11px; font-weight: 500; color: gray;">
            窗口期：{{windowDateStr}}
          </span>
        </el-col>
        <el-col :span="6">
          <span
            style="line-height:25px;font-size:15px;margin-left:50%; font-weight: 500;text-align:center;">测试转化漏斗</span>
        </el-col>
        <el-col :span="6">
          <!-- <el-button type="primary" icon="el-icon-edit" size="small" @click="queryFunnelData">趋势</el-button>
          <el-button type="primary" icon="el-icon-share" size="small" @click="queryFunnelData">对比</el-button> -->
          <el-radio-group v-model="tabPosition">
            <el-radio-button label="趋势">趋势</el-radio-button>
            <el-radio-button label="对比">对比</el-radio-button>
          </el-radio-group>
          <el-button icon="el-icon-setting" @click="handleDelete" size="small">显示设置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-card shadow="hover" class="main_content">
      <el-container>
        <el-aside width="420px" style="background-color:#ffffff;border-right:1px solid #e9f0f7;">
          <div id="funnelContainer" v-loading="funnelLoading">
            <div v-for="(data, index) in funnelData">
              <div style="padding: 10px 0; text-align: center;width: 360px; display: inline-block;">
                <svg data-step="$ALL" class="active" width="107" height="57" xmlns="http://www.w3.org/2000/svg">
                  <g>
                    <title></title>
                    <g fill="none" fill-rule="evenodd">
                      <g class="active" fill="#EAEFF4">
                        <polygon points="0,0 107,0 107,44 53.5,57 0,44"
                          style="stroke-width: 1; cursor: pointer; stroke: rgba(0,0,0,0.12);"></polygon>
                      </g>
                    </g>
                    <text fill="#000000" stroke="#6666ff" stroke-width="0" stroke-dasharray="null" x="50%" y="23"
                      font-size="14" font-family="Monospace" text-anchor="middle" xml:space="preserve"
                      v-show="index === 0">总转化率</text>
                    <text xml:space="preserve" text-anchor="middle" font-size="14" y="39" x="48%"
                      stroke-dasharray="null" stroke-width="0" stroke="#6666ff" fill="#000000">
                      {{ data.transPercent }}
                    </text>
                  </g>
                </svg>
              </div>
              <div style="width: 100%;">
                <div class="fu-arrow-container">
                  <span class="icon-funnel-step">{{ index + 1 }}</span>
                  <div class="div-inline event-title">{{ data.stepName }}</div>
                  <div class="div-inline sa-h-split"></div>
                  <div class="div-inline" style="text-align: right;"><span data-method="user-list" data-index="0">
                      <el-popover placement="right" style="padding:0px" trigger="click">
                        <div class="ant-tooltip-inner">
                          <ul class="sa-globa_index_optList_3oGPNS">
                            <li>
                              <router-link :to="'/group/userDetail?id=' + 36" class="panel-head"><i
                                  class="el-icon-view"></i>&nbsp;查看用户列表</router-link>
                            </li>
                            <li>
                              <router-link :to="'/group/create?id=' + 36" class="panel-head"><i
                                  class="el-icon-search"></i>&nbsp;查看用户画像</router-link>
                            </li>
                            <li><a target="_blank" rel="noopener noreferrer" href=""><i
                                  class="el-icon-user"></i>&nbsp;添加用户分群</a></li>
                          </ul>
                        </div>
                        <a slot="reference" style="text-decoration: underline;">{{ data.personNum }}</a>
                      </el-popover>


                    </span><span>人<span></span></span></div>
                </div>
              </div>
            </div>
          </div>
        </el-aside>
        <el-container v-loading="funnelLoading">

          <el-main>
            <div style="text-align: center">总转化率</div>
            <div style="border: 1px solid #f8f8f9;margin-top: 30px;">
              <event-line-chart :chart-data="chartData" :chart-title="chartTitle" :unit="unit"
                :style="{ width: '100%' }" />
            </div>
          </el-main>
        </el-container>
      </el-container>
    </el-card>
    <el-footer height="400px" style="margin-top: 30px;">
      <el-table v-loading="funnelLoading" :data="tableData" row-key="id" border default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column v-for="(item, index) in tableTitle" :sortable="item.sortable" :key="index"
          :prop="item.columnName" :label="item.columnLabel" />
      </el-table>
    </el-footer>


    <el-drawer title="创建漏斗" :with-header="false" size="48%" :visible.sync="drawer" direction="rtl"
      :wrapperClosable="true" :before-close="handleClose">
      <div class="demo-drawer">
        <div class="card">
          <p>创建漏斗</p>
        </div>

        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="漏斗名称" :label-width="formLabelWidth" style="width:380px;margin-top:15px;">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="漏斗窗口期" :label-width="formLabelWidth">
            <el-select v-model="form.windowDateStr" placeholder="请选择活动区域" @change="selectChanged">
              <el-option label="五分钟" value="5-min"></el-option>
              <el-option label="一小时" value="1-hour"></el-option>
              <el-option label="当天" value="0-day"></el-option>
              <el-option label="24小时" value="24-hour"></el-option>
              <el-option label="7天" value="7-day"></el-option>
              <el-option label="14天" value="14-day"></el-option>
              <el-option label="30天" value="30-day"></el-option>
            </el-select>
          </el-form-item>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="width:80%;display: block;float: left;font-size: 15px;">漏斗步骤</span>
              <!--
            <div style="width:30%;display: block;float: right;">设置关联属性
              <el-switch
                v-model="switchValue"
                active-color="#13ce66"
                inactive-color="#c0ccda">
              </el-switch>
              <el-input type="hidden" v-model="form.relationProperty"></el-input>
            </div>
            -->

            </div>
            <el-form-item label="" label-width="10px">
              <p v-for="(item, index) in funnelRuleType">
                <!-- <span class="fu-filter-pos">{{ index + 1 }}</span> -->
              <ul class="pagination modal-4">

                <li><a href="#">{{ index + 1 }}</a></li>

              </ul>


              <el-select v-model="item.eventType" style="width:170px;margin-right:3px" value-key="id">
                <el-option v-for="dict in eventTypeOptions" :key="dict.id" :label="dict.eventTypeName" :value="dict" />
              </el-select>
              <el-select v-model="item.eventItem" style="width:150px;margin-right:3px" value-key="id">
                <el-option v-for="dict in allEventItemListOpts[item.eventType.id]" :key="dict.id"
                  :label="dict.eventItemName" :value="dict" />
              </el-select>
              <el-select v-model="item.eventItemExpression" style="width:100px">
                <el-option v-for="dict in eventPropertysOptions[item.eventItem.valueType]" :key="dict.id"
                  :label="dict.eventItemExpression" :value="dict.eventItemCode" />
              </el-select>
              <el-input v-model="item.value1Str" type="text" controls-position="right" style="width:100px"
                v-show="item.eventItemExpression != 'between'"></el-input>
              <span v-show="item.eventItemExpression == 'between'">
                <el-input v-model="item.value1Str" type="text" controls-position="right" style="width:90px">
                </el-input>与
                <el-input v-model="item.value2Str" type="text" controls-position="right" style="width:90px">
                </el-input>之间
              </span>

              <el-button @click="removeFunnelRule(index)" :disabled="index == 0" type="warning" icon="el-icon-remove">
              </el-button>
              </p>
              <el-input v-model="form.funnelSteps" type="hidden"></el-input>
              <el-row style="text-align: center">
                <el-button @click="addFunnelRule" type="primary" icon="el-icon-plus">添加步骤</el-button>
              </el-row>

            </el-form-item>

          </el-card>
          <div class="demo-drawer__footer">
            <el-button @click="drawer = false">取 消</el-button>
            <el-button type="primary" @click="dealCreateFilter">确 定</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getAllSiteFlowList, getFunnelChartDataFun, getKeepDataFun } from "@/api/analytics/basemeasure";
import EventLineChart from "@/views/report/leave/comments/EventLineChart";
import AndOrLine from '@/components/AndOrLine/index.vue'
import { allEventItemsOptions, eventItemsOptions, eventTypeOptions } from "@/api/config/item";
import { listAllPropertyResult, listPropertyByType } from "@/api/config/property";
import { addFunnel, allListFunnel, updateFunnel } from "@/api/config/funnel";
import { listApplication } from "@/api/config/application";
import { getAllEventMethodResult } from "@/api/config/emethod";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "funnel",
  components: {
    EventLineChart,
    AndOrLine
  },
  data() {
    return {
      windowDateStr: "",
      tabPosition: '',
      switchValue: false,
      funnelDataOptions: [],
      statusOptions: [],
      newFunnelId: null,
      params: {
        dateRange: ''
      },
      lineChartData: {
        actualData: []
      },
      funnelLoading: false,
      // 遮罩层
      loading: true,
      unit: '%',
      funnelData: [],
      tableData: [],
      tableTitle: [],
      chartTitle: [],
      chartData: [],
      // 查询参数
      queryParams: {
        eventTypeGroup: [''],
        queryItems: [],
        applicationCode: [],
        dateRange: [parseTime(new Date(), '{y}-{m}-{d}'), parseTime(new Date(), '{y}-{m}-{d}')],
        funnelId: undefined,
        funnelInfo: {},
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        status: undefined,
        conditionRelation: 'and',
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      drawer: false,
      direction: 'rtl',
      formLabelWidth: '90px',
      index: 1,
      ruleTypes3Flag: 0,
      eventTypeOptions: [],
      referrerTypeOptions: [],
      allEventItemListOpts: {},
      eventPropertysOptions: {},
      applicationList: [],
      funnelRuleType: [
        {
          eventType: {},
          eventItem: {},
          eventItemExpression: undefined,
          valueType: '',
          value1Str: '',
          value2Str: ''
        }
      ],
      // 表单参数
      form: {
        funnelSteps: undefined
      },
      rules: {

      }
    };
  },
  created() {
    this.getEventTypeList();
    this.getAllEventItemsList();
    this.getApplicationList();
    this.getFunnelList();
    this.queryFunnelData();

  },
  beforeDestroy() {
    this.$EventBus.$off('askComponentQueryJson')
  },
  mounted() {
    this.$EventBus.$on('askComponentQueryJson', () => {
      this.askComponentQueryJson()
    })
  },
  methods: {
    // 下拉框的值
    selectChanged(val) {
      this.windowDateStr=val
      console.log(val)
    },
    // 显示设置
    handleDelete() {

    },

    //提交queryJson给 sensorsdata
    askComponentQueryJson() {
      let fid = this.queryParams.funnelId;
      this.queryParams.funnelInfo = this.funnelDataOptions.find(function (element) {
        return element.id === fid;
      });
      console.log(this.queryParams.funnelInfo)
      let requestJson = JSON.stringify(this.queryParams);
      this.$EventBus.$emit('commitComponentQueryJson', requestJson)
    },

    getApplicationList() {
      listApplication({ status: 'Y' }).then(response => {
        this.applicationList = response.rows;
        let that = this;
        this.applicationList.forEach(function (app) {
          if (app.defaultFlag === 'Y') {
            that.queryParams.applicationCode.push(app.appCode);
          }
        });
      });
    },
    getEventTypeList() {
      var param = { status: 'Y' };
      eventTypeOptions(param).then(response => {
        this.eventTypeOptions = response.data;
      });
    },
    getAllEventItemsList() {
      allEventItemsOptions().then(response => {
        this.allEventItemListOpts = response.data;
      });
      listAllPropertyResult().then(response => {
        this.eventPropertysOptions = response.data;
      });
      getAllEventMethodResult().then(response => {
        this.allEventItemMethodOpts = response.data;
      });
    },
    getFunnelList() {
      var param = {};
      allListFunnel(param).then(response => {
        this.funnelDataOptions = response.data;
        this.queryParams.funnelId = this.newFunnelId;
        if(!this.queryParams.funnelId){
          this.queryParams.funnelId=this.funnelDataOptions[0].id;
          this.queryParams.funnelInfo=this.funnelDataOptions[0]
        }
      });
    },

    selfSetFunnelFun() {
      this.drawer = true;
      let funnelID = this.queryParams.funnelId;
      let funnelInfo = this.funnelDataOptions.find(f => f.id === funnelID);
      if (funnelInfo) {
        console.log(funnelInfo);
        this.form = funnelInfo;
        this.form.windowDateStr = funnelInfo.windowDate + '-' + funnelInfo.windowUnit;
        console.log(this.form.windowDateStr)

        this.funnelRuleType = JSON.parse(funnelInfo.funnelSteps);
      }
    },
    handleCreate() {
      this.drawer = true;
    },

    dealCreateFilter() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.relationProperty = this.switchValue;
          var ary = [];
          if (this.form.windowDateStr) {
            ary = this.form.windowDateStr.split('-');
          }

          this.form.windowDate = ary ? ary[0] : '';
          this.form.windowUnit = ary ? ary[1] : '';
          let stepInfos = JSON.stringify(this.funnelRuleType);
          this.form.funnelSteps = stepInfos;
          if (this.form.id) {
            updateFunnel(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.newFunnelId = this.form.id;
                this.getFunnelList();
                this.drawer = false;
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addFunnel(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.newFunnelId = response.data;
                this.getFunnelList();
                this.drawer = false;
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
      this.drawer = false;
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    selectPersonRule() {
      this.dialogVisible = false;
      this.form.personTags = this.userIds.join(',');
    },

    selectReferrer() {
      this.dialogRefVisible = false;
    },

    addEventTypeGroup() {
      this.queryParams.eventTypeGroup.push('');
    },
    addRule() {
      let eventItem = {
        eventType: '',
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      this.queryParams.queryItems.push(eventItem);
    },

    removeRule(array, index) {
      array.splice(index, 1);
    },


    getTemplateRow(index, row) {
      this.templateRadio = row.id;
      this.userTagsId = row.id;
    },
    eventTypeChange(array, index) {
      array[index].eventItemCode = '';
      array[index].eventItemExpression = '';
      array[index].value1Str = '';
      array[index].value2Str = '';
    },

    eventPropertyChange(obj, index) {
      if (obj.eventItemExpression == 'between') {
        this.ruleTypes3Flag = 2;
      } else {
        this.ruleTypes3Flag = 1;
      }
    },
    getEventItemsList(type) {
      var param = { eventType: type };
      eventItemsOptions(param).then(response => {
        this.eventItemsOptions = response.data;
      });
    },
    getItemsPropertyList(type) {
      var param = { valueType: type };
      listPropertyByType(param).then(response => {
        this.eventPropertysOptions = response.data;
      });
    },
    queryFunnelData() {
      this.funnelLoading = true;
      let fid = this.queryParams.funnelId;
      this.queryParams.funnelInfo = this.funnelDataOptions.find(function (element) {
        return element.id === fid;
      });
      // console.log(this.queryParams.funnelInfo)
      let requestJson = JSON.stringify(this.queryParams);
      getFunnelChartDataFun({ requestJson: requestJson }).then(response => {
        this.tableTitle = response.data.tableTitle;
        this.tableData = response.data.tableData;
        this.funnelData = response.data.funnelData;
        this.chartTitle = response.data.chartTitle;
        this.chartData = response.data.chartData;
        this.funnelLoading = false;
      });
    },

    addFunnelRule() {
      let eventItem = {
        eventType: {},
        eventItem: {},
        eventItemExpression: '',
        valueType: '',
        value1Str: '',
        value2Str: '',
      };
      if (!this.funnelRuleType) {
        this.funnelRuleType = [];
      }
      this.funnelRuleType.push(eventItem);
    },

    removeFunnelRule(index) {
      this.funnelRuleType.splice(index, 1)
    }
  }


};
</script>
<style lang="scss" scoped>
.fu-arrow-container {
  background: rgba(0, 0, 0, .03);
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 2px;
  width: 360px;
  line-height: 36px;
  padding: 0 5px;
  display: inline-block;
}

.fu-arrow-container span.icon-funnel-step {
  width: 16px;
  margin: 2px;
  line-height: 16px;
  font-size: 14px;
  background: #c3e6d0;
  color: #2dca93;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

.fu-arrow-container div.div-inline.event-title {
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 190px;
  white-space: nowrap;
  font-size: 14px;
}

.fu-arrow-container div.div-inline.sa-h-split {
  height: 14px;
  margin: 0;
}

.fu-arrow-container div.div-inline {
  display: inline-block;
  vertical-align: middle;
}

.sa-h-split {
  border-right: 1px solid rgba(0, 0, 0, .12);
  margin: 0 10px;
}

.fu-arrow-container div.div-inline:last-child span {
  max-width: 110px;
  display: inline-block;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-top: -3px;
}

span[data-method=user-list] {
  cursor: pointer;
  text-shadow: none;
  text-decoration: underline;
  padding: 10px 0 10px 20px;
}

.demo-drawer__footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid#e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background-color: white;
}

.bottomLine {
  width: 100%;
  display: inline-block;
  border-bottom: 1px solid #e9f0f7;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

// .fu-filter-pos {
//     background: #C3E6D0;
//   color: #2DCA93;
//   cursor: move;
//   float: left;
//   width: 36px;
//   height: 36px;
//   line-height: 36px;
//   text-align: center;
//   font-size: 16px;
//   font-weight: 700;
//   margin-right: 10px;
//   transition: background .2s;
// }

#funnelContainer {
  max-height: 400px;
  min-height: 400px;
  display: inline-block;
  overflow-y: auto;
  overflow-x: hidden;
}

#funnelContainer::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #eaeaea;
}

#funnelContainer::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
  background-color: #ccc;
}

#funnelContainer::-webkit-scrollbar-track {
  border-radius: 10px;
}

.el-popover {
  position: absolute;
  background: #FFFFFF;
  min-width: 150px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  padding: 0px !important;
  z-index: 2000;
  color: red;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  word-break: break-all;
}

.ant-tooltip-inner {
  min-width: 30px;
  min-height: 32px;
  padding: 6px 8px;
  color: #fff;
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  background-color: #272727;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.sa-globa_index_optList_3oGPNS {
  list-style: none;
  padding: 0;
}

.sa-globa_index_optList_3oGPNS li {
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 192px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #4b5259;
  margin-bottom: 8px;
  font-weight: 400;
  cursor: pointer;
}

.sa-globa_index_optList_3oGPNS li:hover {
  font-size: 12px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 192px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid #FFFFFF;
  margin-bottom: 8px;
  font-weight: 400;
  cursor: pointer;
}

// .el-button--success {
//   background-color: #f4b126;
//   border-color: #f4b126
// }

.el-button--primary {
  background-color: #f4b126;
  border-color: #f4b126;
  margin-top: -4px;
}

.el-button--primary:hover {
  background-color: #f6c157;
  border-color: #f6c157;
}

.el-button--small {
  margin-left: 10px;
}


.el-range-input {
  cursor: pointer;
}

// 背景图
// .app-container {
//   background-color: #f7f9fa;
// }
.el-table--medium:hover {
  background-color: #272727;
}






.pagination {
  list-style: none;
  // display: inline-block;
  padding: 0;
  margin-top: 10px;
}

.pagination li {
  display: inline;
  text-align: center;
}

.pagination a {
  float: left;
  display: block;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 12px;
  color: #fff;
  margin-left: -1px;
  border: 1px solid transparent;
  line-height: 1.5;
}

.pagination a.active {
  cursor: default;
}

.pagination a:active {
  outline: none;
}

.modal-4 a {
  margin: 0 5px;
  padding: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-color: #F7C12C;
}

.modal-4 a.prev {
  -moz-border-radius: 50px 0 0 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px 0 0 50px;
  width: 100px;
}

.modal-4 a.next {
  -moz-border-radius: 0 50px 50px 0;
  -webkit-border-radius: 0;
  border-radius: 0 50px 50px 0;
  width: 100px;
}

.modal-4 a:hover {
  background-color: #FFA500;
}

.modal-4 a.active,
.modal-4 a:active {
  background-color: #FFA100;
}

.card {
  display: flex;
  justify-content: center;
  margin: 0 auto 2rem;
  // padding: 1rem;
  min-width: 10rem;
  max-width: 20rem;
  background-color: white;
  word-wrap: break-word;
  box-shadow: 0 0.0625em 0.1875em 0 rgba(0, 0, 0, 0.1), 0 0.5em 0 -0.25em #f2f2f2, 0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 0.1), 0 1em 0 -0.5em #e5e5e5, 0 1em 0.1875em -0.5em rgba(0, 0, 0, 0.1);
}

.card p {
  font-size: 20px;
}

::v-deep .el-table__body tbody tr:nth-child(even) td {
  background-color: #f0f9eb;
}

.el-footer {
  padding: 0px 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

// ::v-deep .el-table tr:hover {
//     background-color: #f0f9eb;
//     cursor: pointer;
// }
</style>
